@import '../storebase1';
.main-container{
    position: inherit;
}
header{
    width: 100%;
    text-align: center;
    background: #404040;
    font-size: px2rem(34);
    height: px2rem(94);
    line-height: px2rem(94);
    color: #fff;
    position: fixed;
    left: 0;
    top:0;
    z-index: 999;
}

.filter-brand-dialog{
    position: fixed;
    background: rgba(0,0,0,.6);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}
.filter-container{
    position: absolute;
    width: 100%;
    top: px2rem(94);
    bottom: 0;
    overflow-y: auto;
    background: #fff;

    &::-webkit-scrollbar {
      display: none;
    }

    .brand-list-wrapper{ }
    #filter-brand {

        .brand-list {
            position: relative;
        }

        .brand-list:last-child {border-bottom: none;}
        .brand-list:first-child {
            li{
                height: 100%;
                a{
                    display: inline-block;
                    padding: 0 px2rem(16);
                }
            }
        }

        .fashion-brand{
            h3{
                position: relative;
                color:#eb1717;
                height: px2rem(87);
                line-height: px2rem(120);
                font-size: px2rem(36);
                &:after{
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: #ccc;
                    width: 100%;
                    height: 1px;
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                    -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
                }
            }

            .brand-filter-index{
                border-bottom: none;
                padding: px2rem(20) px2rem(32);
                display: -webkit-flex;
                display: flex;
                flex-direction:row;
                flex-wrap:wrap;
                a{
                    display: inline-block;
                    padding: px2rem(16) px2rem(22);
                    color: #666;
                    font-size: px2rem(34);
                }
            }
            .fashion-list-wrapper{
                position: relative;
                overflow: hidden;

                .filter-brand-list{
                    section{
                        position: relative;
                        &:after{
                            content: '';
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            background: #ccc;
                            width: 100%;
                            height: 1px;
                            -webkit-transform: scaleY(0.5);
                            transform: scaleY(0.5);
                            -webkit-transform-origin: 0 0;
                            transform-origin: 0 0;
                        }
                    }
                    section:nth-last-child(1){
                        border-bottom:none;
                        &:after{
                            content: '';
                            height: 0;
                        }
                    }
                    li{
                        a{padding: 0}
                    }
                }
            }
        }

        .brand-list summary {
            height: px2rem(100);
            line-height: px2rem(100);
            padding:0 px2rem(32);
            font-size: px2rem(34);
            //border-bottom: 1px solid #ccc;
            position: relative;

            &:after{
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                background: #ccc;
                width: 100%;
                height: 1px;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
            }

        }
        .brand-list summary::-webkit-details-marker {display: none;}

        .brand-list[open] summary:after {
            //content: "-";
            /*background: url(../Images/down.png) no-repeat center center;*/ /*展开时的图片*/
            .u-icon-arr{
                -webkit-transform: rotateZ(45deg);
            }
        }

        .brand-list>ul {
            padding: 0 px2rem(32);
            position: relative;

            &:after{
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                background: #ccc;
                width: 100%;
                height: 1px;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
            }
            //-moz-box-shadow:0 1px 0 #ccc;
            //-webkit-box-shadow:0 1px 0 #ccc;
            //box-shadow:0 1px 0 #ccc;

            li{
                height: px2rem(98);
                line-height: px2rem(98);
                font-size: px2rem(30);
                position: relative;

                &:after{
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: #ccc;
                    width: 100%;
                    height: 1px;
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                    -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
                }

                &:nth-last-child(1){
                    border-bottom: none;
                    &:after{
                        content: '';
                        height: 0;
                    }
                }
                a{
                    width: 100%;
                    display: block;
                    color: #666;
                }
            }
        }
    }
}

.u-icon-arr {
    position: absolute;
    top: px2rem(50);
    right: px2rem(40);
    width: px2rem(20);
    height: px2rem(20);
    margin-top: px2rem(-2);
    border-style: solid;
    border-width: px2rem(2) px2rem(2) 0 0;
    border-color: #6a6a6a;
    -webkit-transform-origin: 75% 25%;
    -webkit-transform: rotateZ(135deg);
    -webkit-transition:-webkit-transform 100ms ease-in .1s;
    transition:transform 100ms ease-in .1s;
}

/*箭头朝底 down*/
.u-icon-arrD {
  -webkit-transform: rotateZ(135deg);
}
/*箭头朝上 up*/
.u-icon-arrU {
  -webkit-transform: rotateZ(-45deg);
}

.left-red-line{
    box-shadow:px2rem(5) px2rem(0) red inset;
}